import React, { memo, Component } from 'react'
import { queryPersonList } from '@/api'
import { baseUrl } from '../../assets/baseUrl'
import { Select, Avatar } from 'antd'
import { MessageOutlined } from '@ant-design/icons'
import { debounce } from 'lodash'
import './index.css'
const { Option } = Select
const BaseUrl = baseUrl()

class selectPerson extends Component {
  constructor(props) {
    super(props)
    this.state = {
      personList: []
    }
  }

  searchPerson=(e)=>{
    if(!e) return
    queryPersonList({keyword: e}).then(res=>{
      this.setState({
        personList: res?.data?.data
      })
    })
  }

  selectPerson=(e)=>{
    if(this.props?.onSelect)
    this.props.onSelect(e)
  }

  render() {
    const { personList } = this.state
    return (
      <div className='selectPerson'>
        <Select
          showSearch
          onSearch={debounce(this.searchPerson.bind(this),700)}
          allowClear
          style={{ width: 360 }}
          placeholder="输入姓名或昵称搜索"
          filterOption={false}
          onSelect={this.selectPerson.bind(this)}
        >
          {personList.map((item) => (
            <Option key={item?.studentId}><Avatar src={BaseUrl + item?.headPicUrl} size="small"/>{item.realName || '未实名'}/({item.nickName}){item?.className?'-'+item.className:''}</Option>
          ))}
        </Select>
      </div>
    )
  }
}
export default memo(selectPerson)
